import React, { useEffect, useState, useRef } from "react";
import './home.scss'
import Head from "../../components/head";
import Top from "../../components/Top/top";
import * as echarts from 'echarts'
import { useNavigate } from "react-router-dom";
import { EyeO } from '@react-vant/icons';

export default function Home() {
	const navigater = useNavigate()
	// 饼图
	const pie = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center'
		},
		color: ['#CCEABB', '#FDCB9E', '#F5F5F5'],
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: 1048, name: '课程已售' },
					{ value: 735, name: '课程观看率' },
					{ value: 580, name: '未看' }
				]
			}
		]
	}
	// 折现
	const line = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['收入']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '收入',
				type: 'line',
				stack: 'Total',
				data: [120, 132, 101, 134, 90, 230, 210, 300, 130, 180, 150, 230]
			},
		]
	};

	useEffect(() => {
		var myChart = echarts.init(document.getElementById('pie'));
		myChart.setOption(pie);
		var myChart = echarts.init(document.getElementById('line'));
		myChart.setOption(line);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	}, [])

	return (
		<div className="home">
			<Head />
			<div className="content">
				<Top />
				<div className="line">
					<div><h3>收入</h3></div>
					<div id="line" style={{ height: "300%" }}>
					</div>
				</div>
				<div className="pie">
					<div><h3>课程统计</h3></div>
					<div id="pie" style={{ height: "300%" }}>
					</div>
				</div>
				<div className="week">
					<div><h3>每周销售统计</h3></div>
					<div className="course">
						<div className="course1">课程</div>
						<div className="sold-income">
							<div>已售</div>
							<div>收入</div>
						</div>
					</div>
					<div className="ps">
						<div className="p">
							<div className="p2">
								<p>P</p>
							</div>
							<div className="p3">
								<p>PS教程总是被说画面没质感？只需两招</p>
							</div>
						</div>
						<div className="sold-income">
							<div className="sold">
								<div>1</div>
								<div>0</div>
							</div>
							<div className="income">
								<p>￥850.5</p>
							</div>
						</div>
					</div>
					<div className="train">
						<div className="p">
							<div className="p2">
								<img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/%E5%BD%A2%E7%8A%B6_u2059.svg" alt="" />
							</div>
							<div className="p3">
								<p>训练营公开课！酷炫的技能风动态CD封面</p>
							</div>
						</div>
						<div className="sold-income">
							<div className="sold">
								<div>32</div>
							</div>
							<div className="income">
								<p>￥1685</p>
							</div>
						</div>
					</div>
					<div className="al">
						<div className="p">
							<div className="p2">
								<p>A</p>
							</div>
							<div className="p3">
								<p>Al教程！重复拖尾字体效果怎么做？</p>
							</div>
						</div>
						<div className="sold-income">
							<div className="sold">
								<div>1</div>
								<div>2</div>
							</div>
							<div className="income">
								<p>￥809</p>
							</div>
						</div>
					</div>
				</div>
				<div className="stu-position">
					<div className="stu-hot"><h3>热门学生位置</h3></div>
					<div className="stu-bj">
						<div className="position">
							北京
						</div>
						<div className="stu-linear">
							<div>
								<img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_u2113.svg" alt="" />
								<span>3,551</span>
							</div>
						</div>
						<div className="percentage">
							<span>30%</span>
						</div>
					</div>
					<div className="stu-sh">
						<div className="position">
							<span>上海</span>
						</div>
						<div className="sh-linear">
							<div>
								<img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_u2113.svg" alt="" />
								<span>2,951</span>
							</div>
						</div>
						<div className="percentage">
							<span>20%</span>
						</div>
					</div>
					<div className="stu-sz">
						<div className="position">
							<span>深圳</span>
						</div>
						<div className="sz-linear">
							<div>
								<img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_u2113.svg" alt="" />
								<span>2,125</span>
							</div>
						</div>
						<div className="percentage">
							<span>10%</span>
						</div>
					</div>
				</div>
				<div className="hot-course">
					<div className="hot-one"><h3>热门课程</h3></div>
					<div className="course-one">
						<div className="one-img">
							<img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/image_10_u2102.png" alt="" />
						</div>
						<div className="one-text">
							<span>如何使用PS制作文字标注效果?1个月</span>
						</div>
						<div className="one-eye">
							<div>
								<EyeO />
							</div>
							<div><span>1,947</span></div>
						</div>
					</div>
					<div className="course-two">
						<div className="two-img">
							<p>P</p>
						</div>
						<div className="two-text">
							<span>Sketch 101 - Ul设计教程2个月以前</span>
						</div>
						<div className="two-eye">
							<div>
								<EyeO />
							</div>
							<div><span>1,731</span></div>
						</div>
					</div>
					<div className="course-three">
						<div className="three-img">
							<img src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/rectangle_2_u2085.png" alt="" />
						</div>
						<div className="three-text">
							<span>Figma创意复古Q版人物宫格插画2天前</span>
						</div>
						<div className="three-eye">
							<div>
								<EyeO />
							</div>
							<div><span>2,440</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}
